<template>
  <div class="pub-dialog">
    <el-dialog
      :top="top"
      :ref="dialogVisableRef"
      append-to-body
      custom-class="pub-dialog"
      :title="title"
      :visible.sync="showDialog"
      :width="dialogSize[type]"
      @close="handleClose"
      :close-on-click-modal="false"
      :show-close="showClose"
    >
      <slot />
      <div slot="footer" class="dialog-footer" v-if="btnType !== '0'">
        <el-button @click="dialogCancel">{{ cancelText }}</el-button>
        <el-button
          type="primary"
          plain
          @click="dialogExtraSubmit"
          v-if="btnType == '4'"
          >{{ sureTextExtra }}</el-button
        >
        <el-button
          type="primary"
          @click="dialogSubmit"
          v-if="btnType !== '2'"
          :loading="sureBtnLoading"
          >{{ sureText }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    /* 三种宽度default: '896px', medium: '600px', small: '320px' */
    type: {
      type: String,
      default: "default",
    },
    top: {
      type: String,
      default: "15vh",
    },
    dialogWidth: {
      type: String,
      default: "default",
    },
    // 弹窗标题
    title: String,
    // 按钮类型：0：无按钮 1：确定按钮 2：取消按钮 3：确定取消按钮 4：确定取消按钮+额外一个按钮拓展
    btnType: {
      type: String,
      default: "3",
    },
    /* 确认按钮文字 */
    sureText: {
      type: String,
      default: "确定",
    },
    /* 取消按钮文字 */
    cancelText: {
      type: String,
      default: "取消",
    },
    /* 取消按钮文字 */
    sureTextExtra: {
      type: String,
      default: "确定",
    },
    /* 对话框显示隐藏 */
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    /* 表单元素默认宽度 */
    formLabelWidth: {
      type: String,
      default: "120px",
    },
    /* 子组件关闭回调 */
    dialogVisableRef: String,
    showClose: {
      type: Boolean,
      default: true,
    },
    /* 按钮loading */
    sureBtnLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 控制弹出框显示隐藏
      showDialog: false,
      dialogSize: {
        large: "calc(100% - 100px)",
        default: "1420px",
        big: "896px",
        medium: "600px",
        small: "360px",
      },
    };
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.showDialog = false;
      this.$emit("dialogCancel");
      // this.$emit("switchVisable", false, this.dialogVisableRef);
    },
    dialogSubmit() {
      this.$emit("dialogSubmit");
      // this.showDialog = false;
    },
    dialogExtraSubmit() {
      this.$emit("dialogExtraSubmit");
      // this.showDialog = false;
    },
    dialogCancel() {
      this.showDialog = false;
      this.$emit("dialogCancel");
    },
  },
  watch: {
    // 监听 dialogVisible 改变
    dialogVisible(oldVal, newVal) {
      this.showDialog = this.dialogVisible;
    },
  },
};
</script>

<style lang="less">
.pub-dialog {
	.el-dialog__headerbtn {
		top: 10px !important;
	}
  width: 1420px;
	.el-dialog__wrapper {
		z-index: 9999 !important;
	}
  .el-dialog__header {
    background: rgb(16, 29, 41);
  }
  .el-dialog__body,
  .el-dialog__footer {
    background: #1c262d;
  }
  .el-dialog__header {
    padding: 20px;
    .el-dialog__title {
      color: #c6d3ec;
      font-size: 20px;
    }
  }
  .dialog-footer {
    .el-button--default {
      background: #253141;
      color: #fff;
      border: 1px solid #40486a;
    }
    .el-button--primary {
      background: #25414f;
      color: #41e6f0;
      border: 1px solid #40486a;
    }
  }
  //.el-dialog {
  //  .el-dialog__header {
  //    text-align: left;
  //    font-weight: normal;
  //    .el-dialog__title {
  //      color: $white;
  //    }
  //  }
  //}
  //
  //.el-dialog__body {
  //  text-align: center;
  //  padding: 15px 20px;
  //
  //  .pub-card {
  //    text-align: left;
  //  }
  //}
  //
  //.el-form-item__label {
  //  font-weight: 500;
  //  //color: $main;
  //}
}
</style>
